<template>
	<div class="main-container">
		<TableBody>
			<template #tableConfig>
				<TableConfig v-model:border="tableConfig.border" v-model:stripe="tableConfig.stripe" @refresh="doRefresh">
					<template #actions>
						<el-button type="primary" size="small" icon="PlusIcon" @click="onAddItem">添加</el-button>
						<el-button type="danger" size="small" icon="DeleteIcon" :disabled="selectRows!.length === 0"
							@click="onDeleteItems">删除</el-button>
						<el-button type="primary" size="small" icon="PlusIcon" @click="onChickPwd">显示</el-button>

					</template>
				</TableConfig>
			</template>
			<template #default>
				<el-table ref="tableRef" v-loading="tableLoading" :data="dataList"
					:header-cell-style="tableConfig.headerCellStyle" :size="tableConfig.size" :stripe="tableConfig.stripe"
					:border="tableConfig.border" :height="tableConfig.height">
					<el-table-column type="selection" width="45" fixed="left" />
					<el-table-column align="center" label="名称" prop="username" width="100" />

					<el-table-column align="center" label="所属角色" prop="roleId">
						<template #default="scope">
							<el-tag size="small">
								{{ identifyUserRole(scope.row.roleId) }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column align="center" label="上次登录时间" prop="login_time" width="160px" />
					<el-table-column align="center" label="上次登录IP" prop="last_login_ip" width="130px" />
					<el-table-column align="center" label="状态">
						<template #default="scope">
							<el-tag size="small" :type="scope.row.status === 1 ? 'success' : 'danger'">
								{{ scope.row.status === 1 ? '正常' : '禁用' }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column align="center" v-if="checkPwd" label="密码" prop="pwd" width="150" />
					<el-table-column align="center" label="手机号" prop="mobile" width="150" />
					<el-table-column align="center" label="邮箱" prop="email" width="150" />
					<el-table-column align="center" label="操作" fixed="right" width="220">
						<template #default="scope">
							<el-button v-if="scope.row.username != 'adminWork'" type="primary" size="small" plain
								@click="onUpdateItem(scope.row)">编辑</el-button>
							<!-- <el-button v-if="scope.row.username != 'adminWork'"  type="danger" size="small" plain @click="onDeleteItem(scope.row)">删除</el-button> -->
							<el-button v-if="scope.row.username != 'adminWork'"
								:type="scope.row.status === 1 ? 'warning' : 'success'" size="small" plain
								@click="onEnableItem(scope.row)">
								{{ scope.row.status === 1 ? '禁用' : '启用' }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
			<template #footer>
				<TableFooter ref="tableFooter" @refresh="doRefresh" @pageChanged="doRefresh" />
			</template>
		</TableBody>
		<Dialog ref="dialogRef">
			<template #content>
				<el-form class="base-form-container" :model="userModel" :inline="true" label-width="80px"
					label-position="right">
					<el-divider border-style="dashed" content-position="left">基本信息</el-divider>
					<el-form-item class="form-item__require" label="用户名称" prop="nickName">
						<el-input v-model="userModel.nickName" placeholder="请输入用户名称" clearable />
					</el-form-item>
					<el-form-item class="form-item__require" label="手机号码" prop="path">
						<el-input v-model="userModel.mobile" placeholder="请输入手机号码" clearable></el-input>
					</el-form-item>
					<el-form-item class="form-item__require" label="邮箱地址">
						<el-input v-model="userModel.email" placeholder="请输入邮箱地址" clearable></el-input>
					</el-form-item>
					<el-divider border-style="dashed" content-position="left">权限设置</el-divider>
					<!-- <el-form-item class="form-item__require" label="所属部门" prop="name">
						<TreeSelector v-model:value="userModel.departmentId" placeholder="请选择所属部门" :data="departmentList"
							:dataFields="{
								label: 'title',
								value: 'id'
							}" />
					</el-form-item> -->
					<el-form-item class="form-item__require" label="所属角色" prop="path">
						<el-select placeholder="请选择角色" v-model="userModel.roleId" clearable @change="handlerRoles">
							<el-option v-for="roleItem of roleList" :key="roleItem.id" :value="roleItem.id"
								:label="roleItem.title"></el-option>
						</el-select>
					</el-form-item>
					<el-divider content-position="left">其它信息</el-divider>
					<el-form-item label="登录密码" prop="path">
						<el-input v-model="userModel.password" type="password" placeholder="请输入登录密码" clearable></el-input>

						<el-tag style="margin-top: 10px;" type="danger"> 默认密码123456</el-tag>
					</el-form-item>
					<el-form-item label="用户状态" prop="path">
						<el-radio-group v-model="userModel.status">
							<el-radio :label="1">正常</el-radio>
							<el-radio :label="0">禁用</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</template>
		</Dialog>
	</div>
</template>
<script lang="ts" setup>
import { useDataTable, usePost } from "@/hooks";
import { computed, onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getDepartmentList, getUserList, EditUserList, getAdminGroup, disableUsaer } from "@/api/url";
import type { DialogType, TableFooter } from "@/components/types";

const post = usePost();
const dialogRef = ref<DialogType>();
const tableFooter = ref<TableFooter>();
const tableRef = ref();
const {
	dataList,
	tableLoading,
	tableConfig,
	handleSuccess,
	handleSelectionChange,
	selectRows,
	useHeight,
} = useDataTable<UserModelType>();
const userModel = reactive<UserModelType>({
	id: 0,
	nickName: "",
	mobile: "",
	email: "",
	gender: 1,

	departmentId: "",
	roleId: "",

	password: "",
	status: 1,
});

const departmentList = ref<DepartmentModelType[]>([]);
const roleList = ref<RoleModelType[]>([]);

// 定义角色和对应描述的对象
const roles: { [key: number]: string } = {
	1: "超级管理员",
	2: "总经理",
	3: "小职员",
	4: "未知角色"
};

// 定义一个箭头函数来识别用户的角色
const identifyUserRole = (role: number): string => roles[role];
async function doRefresh() {
	const result = await post({
		url: getUserList,
		data: tableFooter.value?.withPageInfoData()
	})
	const { code, data, msg } = result
	const res = {
		code,
		data: data.list,
		msg,
		totalSize: data.totalSize,
	}
	tableFooter.value?.setTotalSize(res.totalSize)
	handleSuccess(res)

	const depRes = await post({
		url: getAdminGroup,
		data: {}
	})
	roleList.value = depRes.data
}
const checkPwd = ref(false)
function onChickPwd(){
	checkPwd.value =  !checkPwd.value
}

// function onDeleteItems() {
// 	ElMessageBox.confirm('确定要删除这些用户吗？', '提示')
// 		.then(() => {
// 			ElMessage.success('数据模拟删除成功, 参数为：' + JSON.stringify(selectRows.value?.map((it: any) => it.id)))
// 		})
// 		.catch(console.log)
// }
function onAddItem() {
	userModel.nickName = ''
	userModel.mobile = ''
	userModel.email = ''
	userModel.gender = 1
	userModel.departmentId = ''
	userModel.roleId = ''
	userModel.password = ''
	userModel.status = 1
	dialogRef.value?.show(() => {
		if (!userModel.nickName) {
			ElMessage.error('请输入用户名')
			return
		}
		if (!userModel.mobile) {
			ElMessage.error('请输入手机号')
			return
		}
		if (!userModel.email) {
			ElMessage.error('请输入邮箱地址')
			return
		}
		if (userModel.departmentId === '') {
			ElMessage.error('请选择某个部门')
			return
		}
		if (userModel.roleId === '') {
			ElMessage.error('请选择某个角色')
			return
		}
		dialogRef.value?.showLoading()

	})
}
function onUpdateItem(item: any) {
	console.log(item, '1111111')
	userModel.id = item.id
	userModel.nickName = item.username
	userModel.mobile = item.mobile
	userModel.email = item.email
	userModel.gender = parseInt(item.gender)
	userModel.departmentId = item.departmentId
	userModel.roleId = item.roleId
	userModel.password = '123456'
	userModel.status = item.status
	dialogRef.value?.show(async () => {
		if (!userModel.nickName) {
			ElMessage.error('请输入用户名')
			return
		}
		if (!userModel.mobile) {
			ElMessage.error('请输入手机号')
			return
		}
		if (!userModel.email) {
			ElMessage.error('请输入邮箱地址')
			return
		}
		if (userModel.departmentId === '') {
			ElMessage.error('请选择某个部门')
			return
		}
		if (userModel.roleId === '') {
			ElMessage.error('请选择某个角色')
			return
		}
		if (userModel.password === '') {
			ElMessage.error('密码不能为空')
			return
		}
		dialogRef.value?.showLoading()
		const reuslt = await post({
			url: EditUserList,
			data: userModel
		})

		ElMessage.success(`${reuslt.msg}`)
		doRefresh()
		dialogRef.value?.close();
		console.log(userModel, 'userModel')

	})
}
function onDeleteItem(item: any) {
	ElMessageBox.confirm('确定要删除此用户吗？', '提示')
		.then(() => {
			dataList.value?.splice(dataList.value.indexOf(item), 1)
		})
		.catch(console.log)
}
function onEnableItem(item: any) {
	ElMessageBox.confirm('确定要' + (item.status === 1 ? '禁用' : '启用') + '此用户吗？', '提示')
		.then(async () => {
			let status = item.status === 1 ? 0 : 1
			console.log(status , 'status')
			const reuslt = await post({	
				url: disableUsaer,
				data: {
					id: item.id,
					status,
				}
			})
			doRefresh()
			ElMessage.success(`${reuslt.msg}`)
		})
		.catch()
}

function handlerRoles(val:any){
	console.log(val  , '213')
	userModel.roleId = val 

}

onMounted(() => {
	// console.log(tableConfig.height);
	doRefresh()
	useHeight()
})
</script>

<style lang="scss" scoped>
.gender-container {
	.gender-icon {
		width: 20px;
	}
}
</style>
